<template>
    <div>
      <!-- 面包屑导航区域 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>您当前所在位置</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>会员卡管理</el-breadcrumb-item>
        <el-breadcrumb-item>储值规则</el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <el-row class="mb10">
          <el-col :span="24">
             <el-button type="primary" size="mini" @click="addRule">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
          </el-col>
        </el-row>
        <el-table :data="tableData" border style="width: 100%" height="500">
           <el-table-column prop="id" label="规则ID" width="70px" ></el-table-column>
           <el-table-column prop="money" label="储值金额"></el-table-column>
           <el-table-column prop="send_money" label="赠送金额"></el-table-column>
           <el-table-column prop="shop_name" label="适用门店"></el-table-column>
           <el-table-column prop="member_type" label="适用会员卡类型"></el-table-column>
           <el-table-column prop="add_time" label="创建时间"></el-table-column>
           <el-table-column label="操作" width="150" >
              <template slot-scope="scope">
                  <el-button  type="primary" @click="editRule(scope.row)" size="mini" >编辑</el-button>
                  <el-button  type="danger" @click="deleteRule(scope.row,scope.$index)" size="mini">删除</el-button>
              </template>
            </el-table-column>
        </el-table>
      </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: []
    }
  },
  created () {
    this.getRuleList()
  },
  methods: {
    async getRuleList () {
      const { data: res } = await this.$http.post('mapi/memberStoreRule')
      console.log(res)
      if (res.code !== 200) return this.$message.error('获取储值规则列表失败！')
      this.$message.success('获取储值规则列表成功！')
      this.tableData = res.list
    },
    // 添加规则
    addRule () {
      this.$router.push('aevaluerules')
    },
    // 编辑规则
    editRule (row) {
      sessionStorage.setItem('valruleId', row.id)
      this.$router.push({
        path: 'aevaluerules',
        params: {
          valruleId: row.id
        }
      })
    },
    // 删除规则
    async deleteRule (row, index) {
      this.$confirm('确定删除此储值规则吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await this.$http.get('mapi/memberStoreRuleDel', { params: { id: row.id } })
        console.log(res)
        if (res.code !== 200) return this.$message.error('删除失败！')
        this.$message.success('删除成功！')
        this.tableData.splice(index, 1)
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    }
  }
}
</script>

<style scoped lang="less">

</style>
